<template>
  <div class="link-layer-content flex">
    <div class="link-layer-left">
      <ul>
        <template v-if="pageType !== '110'">
          <li :class="linkTypeActive == '1' ? 'active' : ''" @click="doChangeLinkType('1')">商城链接</li>
          <li v-if="pageType !== '120'" :class="linkTypeActive == '3' ? 'active' : ''" @click="doChangeLinkType('3')">分类链接</li>
          <li v-if="pageType !== '120'" :class="linkTypeActive == '2' ? 'active' : ''" @click="doChangeLinkType('2')">商品详情</li>
        </template>
        <li v-if="appType == 10 && pageType !== '120'" :class="linkTypeActive == '4' ? 'active' : ''" @click="doChangeLinkType('4')">内容链接</li>
      </ul>
    </div>
    <div class="link-layer-right flex-item">
      <div v-if="linkTypeActive == '1'" class="link-list">
        <div v-if="pageType !== '120'">
          <h2 class="flex v-align-c">
            <label></label>
            <span>基础链接</span>
          </h2>
          <ul>
            <li v-if="appType == 10" class="mar-r-11 mar-b-10" @click="doSetLinkType('1001', '领券中心')"><el-button size="small" plain>领券中心</el-button></li>
            <!-- <li class="mar-r-11 mar-b-10" @click="doSetLinkType('1002', '微信客服')"><el-button size="small" plain>微信客服</el-button></li> -->
            <li class="mar-r-11 mar-b-10" @click="doSetLinkType('1005', '首页')"><el-button size="small" plain>首页</el-button></li>
            <li class="mar-r-11 mar-b-10" @click="doSetLinkType('1006', '分类')"><el-button size="small" plain>分类</el-button></li>
            <li class="mar-r-11 mar-b-10" @click="doSetLinkType('1007', '购物车')"><el-button size="small" plain>购物车</el-button></li>
            <li class="mar-r-11 mar-b-10" @click="doSetLinkType('1008', '个人中心')"><el-button size="small" plain>个人中心</el-button></li>
            <li v-if="appType == 10" class="mar-r-11 mar-b-10" @click="doSetLinkType('1009', '内容中心')"><el-button size="small" plain>内容中心</el-button></li>
            <li class="mar-r-11 mar-b-10" @click="doSetLinkType('1010', '搜索页')"><el-button size="small" plain>搜索页</el-button></li>
            <!-- <li v-if="appType == 10" class="mar-r-11 mar-b-10" @click="doSetLinkType('1010', '全部商品')"><el-button size="small" plain>全部商品</el-button></li> -->
          </ul>
        </div>
        <div v-if="appType == 10 && pageType !== '120'">
          <h2 class="flex v-align-c">
            <label></label>
            <span>直播</span>
          </h2>
          <ul>
            <li class="mar-r-11" @click="doSetLinkType('1401', '直播列表')"><el-button size="small" plain>直播列表</el-button></li>
          </ul>
        </div>
        <div v-if="pageType !== '120'">
          <h2 class="flex v-align-c">
            <label></label>
            <span>客服</span>
          </h2>
          <ul>
            <li v-if="appType == 10" class="mar-r-11 pos-rel">
              <el-button size="small" plain :disabled="enterpriseConfig.shopCustomerServiceAuthority != 1" @click="doSetLinkType('1011', '小B客服')">小B客服</el-button>
              <div v-if="!enterpriseConfig.shopCustomerServiceAuthority" class="no-open">未开通</div>
            </li>
            <li class="mar-r-11 pos-rel">
              <el-button size="small" plain :disabled="enterpriseConfig.enterpriseCustomerServiceAuthority != 1" @click="doSetLinkType('1012', '企业客服')">企业客服</el-button>
              <div v-if="!enterpriseConfig.enterpriseCustomerServiceAuthority" class="no-open">未开通</div>
            </li>
          </ul>
        </div>
        <div v-if="appType == 10 && pageType !== '120'">
          <h2 class="flex v-align-c">
            <label></label>
            <span>活动</span>
          </h2>
          <ul>
            <li class="mar-r-11" @click="doSetLinkType('1501', '限时秒杀')"><el-button size="small" plain>限时秒杀</el-button></li>
            <li v-if="getEnterpriseConfig().groupBuyAuthority == 1" class="mar-r-11" @click="doSetLinkType('1502', '社区团购')"><el-button size="small" plain>社区团购</el-button></li>
          </ul>
        </div>
        <div>
          <h2 class="flex v-align-c">              
            <label></label>
            <span>自定义页面</span>
          </h2>
          <ul>
            <li v-for="(item, index) in pageList" :key="index" class="mar-r-11 mar-b-10" @click="doSetLinkType('1101', '自定义页面 - ' + item.pageTitle, item)">
              <el-button size="small" plain>{{item.pageTitle}}</el-button>
            </li>
          </ul>
        </div>
      </div>
      <component-shop-sel v-if="linkTypeActive == '2'" :appType="appType" v-on:selectGoods="doSetLinkGoods"></component-shop-sel>
      <component-category-sel v-if="linkTypeActive == '3'" :appType="appType" v-on:selectCategory="doSetLinkCategory"></component-category-sel>
      <component-content-sel v-if="linkTypeActive == '4'"
        :singleFlag="pageType !== '110'"
        v-on:selectContent="doSetContent"
        @selectSingleContent="doSetSingleContent"></component-content-sel>
    </div>
  </div>
</template>

<script>
  import commonLinkLayer from '../commonLinkLayer'
  import ComponentShopSel from './../ComponentShopSel'
  import ComponentCategorySel from './../ComponentCategorySel'
  import ComponentContentSel from './../ComponentContentSel'
  import { listCustomPage } from '@/api/custom-page/page'
  import { getByEnterpriseId } from '@/api/user/enterprise'

  export default {
    mixins: [commonLinkLayer],
    components: {
      ComponentShopSel, ComponentCategorySel, ComponentContentSel
    },
    props: {
      // 应用类型 10:云店  11：批发
      appType: {
        type: Number,
        default: 10
      },
      // 110：内容中心；120：标签导航
      pageType: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        // 自定义页集合
        pageList: [],
        // 企业配置对象
        enterpriseConfig: {
          shopCustomerServiceAuthority: 0,
          enterpriseCustomerServiceAuthority: 0
        }
      }
    },
    // 初始化页面
    created() {
      getByEnterpriseId(this.getEnterpriseId()).then(response => {
        if (response.isError) return
        this.enterpriseConfig = response.data
      })
      if (this.pageType === '110') {
        this.linkTypeActive = '4'
      } else {
        listCustomPage({
          enterpriseId: this.getEnterpriseId(),
          appType: this.appType,
          pageType: 11
        }).then(response => {
          if (response.isError) return
          this.pageList = response.data
        })
      }
    },
    methods: {
      doSetContent(item) {
        const form = {
          linkType: '4001',
          contentList: item
        }
        this.$emit('selectMoreLink', form)
      },
      doSetSingleContent(item) {
        const form = item
        form.linkType = '4001'
        form.linkParams = `?contentInfoId=${form.contentInfoId}`
        this.$emit('selectLink', form)
      }
    }
  }

</script>
<style lang="less" scoped>
.pos-rel{
  overflow: hidden;
  .no-open{
    background-color: orangered;
    width: 100%;
    height: 16px;
    line-height: 16px;
    font-size: 10px;
    transform: rotate(45deg) translateY(-60%) scale(.8);
    position: absolute;
    left: 30%;
    top: 38%;
    text-align: center;
    color: white;
  }
}
</style>
